<template>
  <div name="card" class="h-full ml-10">
    <div class="h-full border-2 border-gray-300 rounded-lg w-80">
      <div name="card-title" class="flex justify-between">
        <div class="card-title">{{ msg }}</div>
        <div class="flex h-10 items-center pr-2">
          <svg-item
            class="cursor-pointer mr-1"
            @click="addItem(list)"
            name="icon-add"
          ></svg-item>
          <svg-item name="icon-elipsis"></svg-item>
        </div>
      </div>
      <div
        name="card-content"
        class="overflow-auto"
        style="height: calc(100% - 3rem)"
      >
        <Draggable
          :list="list"
          item-key="id"
          group="card"
          class="h-5/6"
          :disabled="!enable"
          :move="checkMove"
          @start="dragging = true"
          @end="dragging = false"
        >
          <template #item="{ element }">
            <div
              @dblclick="edit(element)"
              v-contextmenu="{ name: msg, data: element }"
              class=" relative
                px-5
                py-3
                m-3
                border border-gray-300
                cursor-move
                text-black
                bg-white
                rounded-md
              "
              :class="{ 'ring-1 ring-blue-600': element.isShow }"
            >
              <input
                type="checkbox"
                class="
                  rounded
                  focus:ring
                  focus:ring-offset-0
                  focus:ring-indigo-200
                  focus:ring-opacity-50
                  m-auto
                "
                v-model="element.checked"
              />
              <div
                class=" whitespace-pre-wrap break-all ml-2 inline-block box-border align-middle w-5/6" :class="{invisible:element.isShow}"
              >
                {{ element.name }}
              </div>            
              <textarea
                style="position: absolute;height: calc( 100% - 1rem);"
                class=" left-11 top-3.5 overflow-y-hidden w-2/3 border-0 focus:ring-0 p-0 align-middle resize-none"
                type="text"
                v-model="element.name"
                v-show="element.isShow"
                v-focus="element.isShow"
                placeholder="添加一个任务"
                @blur="blur(element)"
              />
            </div>
          </template>
        </Draggable>
        <context-menu :name="msg">
          <context-menu-item @itemClickHandle="rightEdit"
            ><div class="flex">
              <svg-item name="icon-edit" :size="16"></svg-item>编辑
            </div></context-menu-item
          >
          <context-menu-item @itemClickHandle="itemClickEvent"
            ><div class="flex">
              <svg-item name="icon-ashbin" :size="16"></svg-item>删除
            </div></context-menu-item
          >
        </context-menu>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, PropType } from "vue";
import initData from "../logic/initData";
import { nanoid } from "nanoid";
import Draggable from "vuedraggable";
import SvgItem from "./SvgItem.vue";
import { TodoNode } from "../types/TodoNode";
export default defineComponent({
  name: "Card",
  props: {
    msg: {
      type: String,
      required: true,
    },
    list: {
      type: Array as PropType<TodoNode[]>,
      required: true,
    },
  },
  components: {
    Draggable,
    SvgItem,
  },
  computed: {
    enable(): boolean {
      let result= true;
      this.list.forEach(todoNode=>{
          if(todoNode.isShow){
            result = false
          }
      });
      return result;
    },
  },
  methods: {
    checkMove: (e: any) => {
      console.log(e);
    },
    addItem: (element: Array<TodoNode>) => {
      let item = ref({ id: nanoid(), name: "", checked: false, isShow: false });
      element.push(item.value);
      item.value.isShow = true;
    },
    itemClickEvent: function (e: {data:TodoNode}) {
      this.list.forEach((item: any, index) => {
        if (item.id == e.data.id) {
          this.list.splice(index, 1);
        }
      });
    },
    blur: function (element: TodoNode) {
      element.isShow = false;
      if (element.name == "") {
        this.list.forEach((item: any, index) => {
          if (item.id == element.id) {
            this.list.splice(index, 1);
          }
        });
      }
    },
  },
});
</script>

<script setup lang="ts">
window.utools &&
  utools.onPluginReady(() => {
    initData();
  });
function edit(element: any) {
  element.isShow = true;
}
function rightEdit(e: any) {
  edit(e.data);
}
const dragging = ref(false);
</script>

<style scoped lang="postcss">
.overflow-auto {
  &::-webkit-scrollbar {
    width: 7px;
    height: 1px;
  }
  &::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: skyblue;
    background-image: -webkit-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.2) 25%,
      transparent 25%,
      transparent 50%,
      rgba(255, 255, 255, 0.2) 50%,
      rgba(255, 255, 255, 0.2) 75%,
      transparent 75%,
      transparent
    );
  }
  &::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #ededed;
    border-radius: 10px;
  }
}
textarea::-webkit-scrollbar {
  display: none;
}
.card-title {
  @apply flex h-10 items-center pl-8 select-none;
  background: linear-gradient(to right, #acb6e5, #86fde8);
  background-clip: text;
  font-size: 18px;
  font-weight: 600;
  color: transparent;
}

</style>
<style>
.v-contextmenu {
  position: fixed;
  top: 0;
  left: 0;
  color: #444;
  display: inline-block;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
.v-contextmenu-item {
  cursor: pointer;
  background-color: #fff;
  padding: 10px 20px;
  font-size: 14px;
  white-space: nowrap;
}
.v-contextmenu-item:hover {
  color: #409eff;
  background-color: #f2f8fe;
}
</style>
